{% extends 'usercenter-base.html' %}
{% block title %}成绩统计- 慕学在线网{% endblock %}
{% load staticfiles %}
{% block custom_css %}
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

<link rel="stylesheet" type="text/css" href="{% static '' %}css/aui.css"/>
    <link rel="stylesheet" type="text/css" href="{% static '' %}css/muke/course/common-less.css">
{% load filter %}


{% endblock %}
{% block custom_bread %}
     <section>
        <div class="wp">
            <ul  class="crumbs">
                <li><a href="{% url 'index' %}">首页</a>></li>
                <li><a href="{% url 'users:info' %}">个人中心</a>></li>
                <li>成绩统计</li>
            </ul>
        </div>
    </section>
{% endblock %}

 {% block rigt_form %}
    <div class="right" >
            <div class="personal_des Releasecont">
                <div class="head">
                    <h1>成绩统计</h1>
                </div>
            </div>
            <div class="personal_des permessage">
                <div class="head">
                    <ul class="tab_header messagehead">
                        <li class="active"><a href="">作业成绩区间统计</a></li>
                         <li><a href="{% url 'users:my_discuss_charts' %}">话题讨论次数统计</a></li>
                        <li><a href="{% url 'users:my_score_list' %}">成绩列表</a></li>
                        <li><a href="{% url 'users:my_discuss_list' %}">话题人数</a></li>
                    </ul>

                </div>
                <div class="companycenter">

                <div class="messagelist">

                    <div class="messages" class="messages" style="border-bottom: 1px solid #edf1f2;">

                         <div id="main" style="width: 950px;height:450px;position: center"></div>

                    </div>


                </div>
                </div>
                      <div class="pageturn pagerright">
              <ul class="pagelist">
             {% if data.has_previous  %}
                 <li class="long"><a href="?page={{data.previous_page_number}}">上一页</a></li>
            {%endif%}

                {% for i in   data.paginator.page_range %}
                 {%if i == data.number  %}
                     <li class="active"><a href="?page={{ i }}">{{i }}</a></li>
                    {% else %}
                      <li><a href="?page={{ i }}" class="page">{{ i }}</a></li>
                    {% endif %}
                {% endfor %}
                {% if data.has_next  %}
                 <li class="long"><a href="?page={{data.next_page_number}}">下一页</a></li>
            {%endif%}
            </ul>
            </div>
            </div>
        </div>
 {% endblock %}
{% block custom_js %}
    <script type="text/javascript">
       // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'));
         {% for item in data %}


      // 指定图表的配置项和数据
      var option = {
        title: {
          text: '{{ item.text}}',

        },
        tooltip: {},
        legend: {
          data: {{ item.legend_data|safe }}
        },
        xAxis: {
          data: ['90分及以上', '80-90分', '70-80分', '60-70分', '60分以下']
        },
        yAxis: {type: 'value',
name: "单位（人）"

        },
        series:
            {{ item.series|safe}}
      };
       {% endfor %}

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
</script>
{% endblock %}


